<template>
  <div class="3xl:container mx-auto bg-yellow-500">
    <div class="text-white">
      <h1>{{ msg }}</h1>
      <h1>{{ reserveMsg }}</h1>
      <h1>{{ reserveCos }}</h1>
    </div>
    <div>
      <Map :mode="msg" :is-true="true"></Map>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watchEffect, watch, reactive } from "vue"
import Map from "@/components/map.vue"
import { mapMutations, mapGetters, mapState } from 'vuex'
import store from '@/store'

/* computed */
const msg = ref('山河远阔，人间星河，无一是你，无一不是你')
const cos = ref('message')
const reserveMsg = computed(() => {
  return msg.value.split('').reverse().join('')
})
const reserveCos = computed(() => {
  return cos.value.split('').reverse().join('')
})
/* computed */

/* watchEffect */
const h = ref('asdf')
const effect = watchEffect(() => console.log(h.value))
h.value = 'hong'
const stop = watchEffect(() => {})
stop()
/* watchEffect */

/* watch */
// 直接侦听ref
const count = ref(0)
watch(() => count.value, (count, preCount) => {
  console.log('count', count, preCount)
})
count.value = 1001

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(() => state.count, (count, preCount) => {
  console.log('state', count, preCount)
})
state.count = 3306

// 侦听多个
const firstName = ref('tom')
const lastName = ref('jam')
watch(
  () => [firstName.value, lastName.value],
  (currName, preName) => {
    console.log('currName, preName', currName, preName);
    console.log('firstName, lastName', firstName.value, lastName.value);
  }
)
firstName.value = 'hsa'
/* watch */

/*start get vuex stats */
function setRoleVuex() {
  console.log(store.state.role)
  store.commit('setRole', 'admin')
  console.log(store.state.role)

}

function getRoleVuex() {
  console.log(store.getters.getRole)
}

/*end get vuex stats */



onMounted(() => {
  setRoleVuex()
  getRoleVuex()
})
</script>
